import React, { Fragment, useRef } from 'react';
import * as echarts from 'echarts/core';
import {
  LineChart,
} from 'echarts/charts';
import {
  TooltipComponent,
  TitleComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
} from 'echarts/components';
import {
  CanvasRenderer,
} from 'echarts/renderers';
import Chart from "./Chart";
import { DataViewerCommonRef, DataViewerProps } from "./interface";
import { Card, Empty, Space } from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import { css } from "@emotion/react";
import Img from "./Img";

echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, LegendComponent,ToolboxComponent, LineChart, CanvasRenderer]
);

export default function DataViewer(props: DataViewerProps) {
  const { project, datas } = props;
  const { name } = project;

  const dataViewerCommonRef = useRef<DataViewerCommonRef>(null);

  return <Card
    title={name}
    styles={{
      body: {
        padding: 0,
      }
    }}
    extra={
      datas.length ? <Space>
        <DownloadOutlined onClick={()=>{
          dataViewerCommonRef.current?.download();
        }} />
      </Space> : undefined
    }
    css={css`
        & + &{
          margin-top: 20px;
        }
      `}
  >
    {
      datas.length ? <Fragment>
        {project.type === 'DIGITAL' && <Chart ref={dataViewerCommonRef} {...props} />}
        {project.type === 'IMG' && <Img ref={dataViewerCommonRef} {...props} />}
      </Fragment> : <Empty />
    }
  </Card>;
};
